<template>
  <div class="fire" id="fire">
    <!-- <router-view></router-view> -->
    <Map v-if="statusCom === ''" ref="map" />

    <double-comparison v-if="statusCom === '双屏对比'"></double-comparison>
    <roller-comparison v-if="statusCom === '卷帘对比'"></roller-comparison>

    <div class="funcArea">
      <div class="left"></div>
      <div class="right">
        <div class="searchContainer" v-if="searchActive">
          <img src="../../assets/img/Home/搜索背景切图.png" alt />
          <input type="text" class="inputLable" placeholder="请输入火区名称" v-model="fireName" />
          <div class="input-wrapper" v-show="fireList.length && !closeInputUI">
            <el-scrollbar class="left-scrollbar">
              <div class="input-item" v-for="item in fireList" :key="item.id" @click="handleInput('input', item)">
                {{ item.fireName }}
              </div>
            </el-scrollbar>
          </div>
          <div class="title-search-word">
            <div class="title-but" @click="getData">搜索</div>
            <div class="title-but" style="margin-left: -14px" v-if="fireName" @click="resetData()">
              <i class="el-icon-close"></i>
            </div>
          </div>
        </div>
        <div class="search" @click="searchActive = !searchActive">
          <img :src="require(`../../assets/img/Home/${searchActive ? '搜索2' : '搜索1'
            }.png`)
            " alt />
        </div>
        <div class="fold" @click.stop="holdActive = false">
          <img :src="require(`../../assets/img/Home/${statusCom != '' ? '双屏2' : '双屏1'
            }.png`)
            " alt />
        </div>
        <div class="select-wrapper" v-if="!holdActive" @click.stop>
          <div class="select-item" v-for="item in descList" :key="item" @click="handleSelect('select', item)">
            {{ item }}
          </div>
        </div>

        <div class="statistics" @click="statisticsActive = !statisticsActive">
          <img :src="require(`../../assets/img/Home/${statisticsActive ? '图表打开按钮2' : '图表打开按钮'
            }.png`)
            " alt />
        </div>
      </div>
    </div>
    <Transition name="statistics">
      <FireStatistics v-show="statisticsActive" />
    </Transition>
  </div>
</template>

<script>
import Map from "./components/FireManagement/FireManagement.vue";
import { fireNameList } from "@/api/data/home";
import DoubleComparison from "./components/FireManagement/comparison/DoubleComparison.vue";
import RollerComparison from "./components/FireManagement/comparison/RollerComparison.vue";
import FireStatistics from "./components/Statistics/StatisticsFire";
import { listener } from '@/utils/listener'

export default {
  name: "fire",
  components: {
    Map,
    DoubleComparison,
    RollerComparison,
    FireStatistics,
  },
  data() {
    return {
      searchActive: false,
      holdActive: true,
      statisticsActive: false, //統計按鈕
      closeInputUI: false,
      flod: false,
      descList: ["双屏对比", "卷帘对比"],
      fireList: [],
      fireName: "",
      statusCom: "",
    };
  },
  props: {},
  computed: {},
  watch: {},
  created() {
    listener.listen('/fire', this.resetViewer)
  },
  mounted() {
    window.addEventListener('click', this.closeWrapper)
    setTimeout(() => {
      this.statisticsActive = true;
    }, 200);
  },
  methods: {
    async getData() {
      if (this.$refs.map) {
        this.$refs.map.backHome();
      }
      this.closeInputUI = false;
      const bp = await fireNameList({ fireName: this.fireName });
      // 判断输入的火区名称是否存在
      if (bp.data.total === 0) {
        this.$message.error("没有查询到" + this.fireName + "火区数据!");
        this.$refs.map.backHome();
        this.fireName = "";
      } else {
        this.fireList = bp.data.rows;
        this.statusCom = "";
      }
    },
    handleInput(flag, item) {
      if (flag === "input") {
        this.$refs.map.zoomTo(item);
        this.fireName = item.fireName;
        this.closeInputUI = true;
      }
    },
    resetData() {
      this.fireName = "";
      this.closeInputUI = false;
      this.$refs.map.backHome();
      this.$refs.map.closeBulletChange(); //地图复位的同时弹窗关闭
    },
    handleSelect(flag, item) {
      this.statusCom = item;
      this.holdActive = true;
    },
    closeWrapper() {
      this.holdActive = true
    },
    resetViewer() {
      this.fireName = ''
      this.statusCom = ""
      this.searchActive = false
      this.closeInputUI = false
      this.statisticsActive = true
    }
  },
  beforeDestroy() {
    window.removeEventListener('click', this.closeWrapper)
    listener.unlisten('/fire', this.resetViewer)
  },
};
</script>

<style lang="scss" scoped>
.statistics-leave-active {
  transition: all 0.5s linear;
}
.router-enter-active,
.router-leave-active {
  .left {
    left: -410px !important;
    opacity: 0 !important;
  }
  .right {
    right: -410px !important;
    opacity: 0 !important;
  }
}
.fire {
  width: 100%;
  height: 100%;

  .funcArea {
    position: absolute;
    top: 100px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    z-index: 100;
    height: 60px;
    pointer-events: none;

    .left {
      transition: all 0.3s linear;
      position: relative;
      opacity: 1;
      left: 0;
      margin-left: 29px;
      pointer-events: all;
    }

    .right {
      transition: all 0.3s linear;
      position: relative;
      opacity: 1;
      right: 0;
      display: flex;
      justify-content: flex-start;
      flex-direction: row;
      height: 60px;
      line-height: 60px;
      pointer-events: all;

      // .search {
      //   margin-right: 23px;
      // }
      .searchContainer {
        width: 380px;
        height: 60px;

        .inputLable,
        .inputLable:active,
        .inputLable:focus {
          position: relative;
          top: -86px;
          height: 53px;
          right: -32px;
          border-radius: 21px;
          background: transparent;
          border: none;
          font-family: "AlibabaPuHuiTi-2-85-Bold";
          font-size: 18px;
          font-weight: normal;
          font-style: italic;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #999999;
          outline: none;
          padding: 0;
          margin: 0;
          width: 80%;
        }

        .title-search-word {
          position: absolute;
          top: -1px;
          right: 218px;
          cursor: pointer;
          display: flex;
          font-family: "AlibabaPuHuiTi-2-85-Bold";
          font-size: 18px;
          font-weight: normal;
          font-style: italic;
          font-stretch: normal;
          color: #fff;

          .title-but {
            // background: #00ab9b;
            margin-right: 27px;
            padding-right: 5px;
            border-radius: 5px;
            cursor: pointer;
          }
        }

        ::v-deep .el-scrollbar__wrap {
          box-sizing: border-box;
          overflow-x: hidden !important;
          margin-bottom: 0 !important;
          height: 175px !important;
          background-color: #08102a;
          opacity: 0.6;
        }

        .input-wrapper {
          margin-top: 10px;
          width: 80%;
          border-radius: 4px;
          border: solid 1px #2766ce;
          background-color: rgba(0, 31, 28, 0.5);
          position: relative;
          top: -89px;
          right: -30px;

          .input-item {
            height: 35px;
            width: 100%;
            text-align: left;
            border-bottom: solid 1px #2766ce;
            font-family: "AlibabaPuHuiTi-2-85-Bold";
            font-size: 16px;
            font-weight: normal;
            font-style: italic;
            font-stretch: normal;
            line-height: 35px;
            letter-spacing: 0px;
            color: #ffffff;
            padding-left: 10px;
            // pointer-events: all;
            cursor: pointer;

            &:last-child {
              border-bottom: none;
            }

            &:hover {
              background-color: #1a4892;
            }
          }
        }
      }

      .fold,
      .search,
      .statistics {
        cursor: pointer;
        margin-right: 20px;
      }

      .select-wrapper {
        margin-top: 10px;
        width: 138px;
        border-radius: 4px;
        border: solid 1px #2766ce;
        background-color: rgba(0, 31, 28, 0.5);
        position: absolute;
        top: 50px;
        right: 50px;
        .select-item {
          height: 35px;
          width: 100%;
          text-align: center;
          border-bottom: solid 1px #2766ce;
          font-family: "AlibabaPuHuiTi-2-55-Bold";
          font-size: 16px;
          font-weight: normal;
          font-style: italic;
          font-stretch: normal;
          line-height: 35px;
          letter-spacing: 0px;
          color: #ffffff;
          cursor: pointer;

          &:last-child {
            border-bottom: none;
          }

          &:hover {
            background-color: #1a4892;
          }
        }
      }

      margin-right: 66px;
    }
  }
}
</style>
